<template>
  <div class="radio-wrapper">
    <input type="radio" class="radio-input" :value="value" :checked="modelValue === value"
      @change="$emit('update:modelValue', value)" />
    <label :for="id" class="radio-label">{{ label }}</label>
  </div>
</template>

<script>
export default {
  name: 'MRadio',
  props: {
    modelValue: {
      type: [String, Number, Boolean],
    },
    value: {
      type: [String, Number, Boolean],
    },
    label: {
      type: String,
      default: '',
    },
    id: {
      type: String,
      default: () => `radio-${Math.random().toString(36).substr(2, 9)}`,
    },
  },
};
</script>

<style scoped>
.radio-wrapper {
  display: flex;
  align-items: center;
}

.radio-input {
  margin-right: 5px;
}

.radio-label {
  cursor: pointer;
  user-select: none;
}
</style>